<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
        width:200px;
        height: 100px;
        background-color:pink;
    }
    .change{
        width:200px;
        height: 100px;
        background-color:green;
        margin:0 auto;
        color:#ffffff;
    }


</style>
<body>
    <!-- <div>

    </div> -->
    <div>
        文本
    </div>
    <script>
        //可以通过js来修改元素的大小、颜色、位置等样式
        //1、element.style.样式 = '';适用于修改元素的样式较少时
        //2、element.className = '';适用于修改元素较多时
        //3、注意：里面的样式采用驼峰命名法;通过js修改的行内样式，权限较高;同样使用className的时候，会覆盖原先的类。

        //4、实例：点击容器，该容器背景色变化，并且大小变化
        // var div = document.querySelector("div");
        // div.onclick = function(){
        //     //this的用法就是对谁操作，因为是对div直接操作，所以直接用this就行，this就代表div
        //     this.style.backgroundColor = 'black';
        //     this.style.width='300px'
        // }


        //5、操作元素的显示和隐藏
        //（1）、display：none 表示隐藏元素； display:block 表示显示元素

        //6、className()
       var div =  document.querySelector('div');
       div.onclick = function(){
           this.className = 'change'
           //如果还想保留原先的类的话就用多类选择器
           //this.claddName = '原先的类名 现在的类名'
       }
        


    </script>
</body>
</html>